<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .wrap{
            width: 500px;
            margin: 200px auto;
            background: rgb(236, 140, 140);
        }
        #content{
            height: 200px;
            max-width: 300px;
            overflow-y: scroll;
            border: 1px solid deepskyblue;
            font-size:12px;
            color: #666;
            padding-left: 10px;
            background: rgb(236, 140, 140);

        }

        .mask{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(179, 233, 79, 0.5);
            color: rgb(82, 168, 221);
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <input type="text" id="nickname" placeholder="输入昵称">
        <button id="connect">连接</button>
        <button id="close">断开</button>
        <div id="content"></div>
        <input type="text" id="msg">
        <button id="send">发送</button>
    </div>
</body>
</html>

<script>
    const input1 = document.querySelector("#nickname");
    const connect = document.getElementById("connect");
    const close = document.getElementById("close");
    const content = document.getElementById("content")
    const msg = document.getElementById("msg");
    const send = document.getElementById("send")

    //1.断开按钮 msg输入框 发送按钮处于禁用状态
    close.disabled = true;
    msg.disabled = true;
    send.disabled = true;
    //2.点击连接,需要使用websocket和服务器建立连接
    connect.onclick = function () {
        //注册事件
        let nickname = input1.value;//获取昵称
        //和websocket建立连接
        let ws = new WebSocket("ws://chst.vip:5200");
        //通过事件检查是否连接成功
        ws.onopen = function () {
            console.log('连接成功')
            //收集用户的昵称,发送给服务器
            ws.send(nickname)
            //连接成功 断开按钮 msg输入框 发送按钮需要解除禁用 连接按钮需要变成禁用状态
            close.disabled = false;
            msg.disabled = false;
            send.disabled = false;
            connect.disabled = true

            input1.disabled = true;
        }
        //事件处理函数能不能用箭头函数?
        send.onclick = function () {
            //3.获取msg输入框的内容,点击发送按钮发送给服务器
            let message = msg.value;
            ws.send(message)
        }

        //4.收到服务器的消息,展示在聊天框

        ws.onmessage = function (e) {
            // console.log(e)
            let val = e.data;
            //创建一个p标签,然后追加到content这个div中
            let p = document.createElement('p')

            p.innerHTML = val;

            content.appendChild(p)

            // console.log(content.scrollTop)

            content.scrollTop = content.scrollHeight //让滚动条保持在最底部

            // console.log(content.scrollHeight)

        }

        close.onclick = function () {
            //弹出遮罩
            let mask = document.createElement('div')
            mask.className = 'mask'
            mask.id = 'mask'
            let hh = document.createElement('h1')
            hh.innerText = '正在断开连接'
            mask.appendChild(hh)
            document.body.appendChild(mask)
            //断开按钮注册事件
            ws.close()
        }

        //检测到websocket被关闭

        ws.onclose = function () {
            console.log('连接已经关闭')
            close.disabled = true;
            msg.disabled = true;
            send.disabled = true;
            connect.disabled = false;
            input1.disabled = false

            //关闭遮罩
            let mask = document.getElementById('mask')

            if (mask) {
                //如果有遮罩,就移除
                document.body.removeChild(mask)
            }
        }
    }
</script>